<template>
  <ul class="choose_box">
    <li
      :style="cssStyle"
      v-for="(item, index) in options"
      :key="index"
      @click="optionsClick(item)"
      class="choose_item"
      :class="{active: checkActive(item)}"
    >{{ item.categoryName }}</li>
  </ul>
</template>

<script>
export default {
  name: "checkbox",
  data() {
    return {
      currValArr: []
    };
  },
  model: {
    prop: "currValArr",
    event: "input"
  },
  props: {
    options: Array, //传入的数组
    isMultiply: {
      //是否是多选。默认为false：单选；true：多选
      type: Boolean,
      default: false
    },
    cssStyle: Object //可以自定义单选或者多选的样式
  },
  methods: {
    optionsClick(item) {
      if (this.isMultiply === false) {
        //单选
        this.$set(this.currValArr, 0, item); // 将该值设为当前数组的第一项
      } else {
        //多选
        if (this.currValArr.indexOf(item) === -1) {
          // 当前数组中没有该值则push到数组
          this.currValArr.push(item);
        } else {
          //当前数组中有该值，找到该值下标并删除
          this.currValArr.splice(this.currValArr.indexOf(item), 1);
        }
      }
      //将选中的数据发送给父组件
      this.$emit("getChoose", this.currValArr);
    },

    checkActive(item) {
      if (this.isMultiply === false) {
        this.currValArr.length = 1;
      }
      return this.currValArr.indexOf(item) !== -1;
    }
  }
};
</script>

<style lang='scss'>
.choose_box {
  padding-bottom: 1rem;
  .choose_item {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 0;
    list-style: none;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    border: 1px solid #eee;
    color: #9c9c9c;
    text-align: center;
    background: #fff;
    font-size: 0.5rem;
  }
  .choose_item:hover {
    background-color: #1bb76e;
    color: #fff;
  }
  .active {
    background-color: #1bb76e;
    color: #fff;
  }
}
</style>